<template>
	<view class="nav-bar-out">
		<view class="nav-bar navbar-fixed">
			<!-- #ifndef H5 -->
			<view class="status-bar" :style="{'background':bg,'height':statusbarHeight}"></view>
			<!-- #endif -->
			<view :class="['nav-bar-view',className]" :style="{'background':backgroundColor}">
				<!-- 头部右边 -->
				<view class="nav-bar-left navbar-btn" >
					<view v-if="leftIcon.length"  class="navbar-btn-icon navbar-btn-icon-left"  @click="onClickLeft">
						<w-icon :type="leftIcon" :color="color" size="40rpx" ></w-icon>
					</view>
					<view v-if="lefttext.length" class="navbar-btn-text" :style="{'color':color}" @click="onClickLeft">{{lefttext}}</view>
					<slot name="left"></slot>
				</view>
				<!-- 中间 -->
				<view class="nav-bar-center" >
					<view v-if="title.length" class="navbar-container-title" :style="{'color':color}">{{title}}</view>	
					<slot name="title"></slot>
				</view>
				<!-- 左边 -->
				<view class="nav-bar-right navbar-btn" >
					<view v-if="rightIcon.length"  class="navbar-btn-icon navbar-btn-icon-right" @click="onClickRight">
						<w-icon :type="rightIcon" :color="color" size="40rpx"></w-icon>
					</view>
					<view v-if="rightText.length" class="navbar-btn-text" :style="{'width':righttextwidth,'color':color}"  @click="onClickRight">{{rightText}}</view>
					<slot name="right"></slot>
				</view>
			</view>
		</view>
		<view class="nav-bar-height" :style="{'height': navHeight}"></view>
	</view>
</template>
<script>
    import wIcon from './w-icon.vue';
    export default {
		data(){
			return {
				bg:""
			}
		},
        components: {
            wIcon
        },
		
        props: {
            /**
             * 标题文字
             */
            title: {
				type: String,
				default: ''
            },
            /**
             * 左侧按钮文本
             */
            leftText: {
                type: String,
                default: ''
            },
            /**
             * 右侧按钮文本
             */
            rightText: {
                type: String,
                default: ''
            },
            /**
             * 左侧按钮图标  没有设置默认返回按钮，leftIcon=""不做任何设置
             */
            leftIcon: {
                type: String,
                default: 'back'
            },
            /**
             * 右侧按钮图标
             */
            rightIcon: {
                type: String,
                default: ''
            },
			leftTextWidth:{
				type:String,
				defalut:"auto"
			},
			rightTextWidth:String,
            /**
             * 按钮图标和文字颜色
             */
            color: {
                type: String,
                default: '#000000'
            },
            /**
             * 背景颜色
             */
            backgroundColor: {
                type: String,
                default: '#FFFFFF'
            },
            /**
             * 是否包含状态栏，默认固定在顶部时包含
             */
            statusBar: {
                type: [Boolean, String],
                default: ''
            },
			type:{
				type:String,
				defalut:1
			},
			/* 导航栏背景色 */
			navbarbg:{
				type:String,
				defalut:"#ffffff"
			}
        },
        computed: {
            insertStatusBar() {
                switch (String(this.statusBar)) {
                    case 'true':
                        return true
                    case 'false':
                        return false
                    default:
                        return this.isFixed
                }
            },
			lefttext(){
				let txt=this.leftText;
				if(this.leftIcon=="location"){
					return this.$store.state.cityname
				}else{
					return txt
				}
			},
			lefttextwidth(){
				return `${this.leftTextWidth}px`
			},
			righttextwidth(){
				return `${this.rightTextWidth}px`

			},
			className(){
				if(this.type==0){
					return 'swicthTab'
				}else{
					return ''
				}
			},
			statusbarHeight(){
				const res = uni.getSystemInfoSync();
				return res.statusBarHeight + 'px';
			},
			navHeight(){
				const res = uni.getSystemInfoSync();
				return (res.statusBarHeight + 44) + 'px';
			}
        },
        methods: {
            /**
             * 左侧按钮点击事件
             */
            onClickLeft() {
				if(this.leftIcon=="back"){
					uni.navigateBack({
						delta:1
					})
					// if(!this.$util.Pages(2)){
					// 	this.$util.redirectTo("/pages/index/index")
					// }else{
					// 	uni.navigateBack({
					// 		delta:1
					// 	})
					// }
				}
				// if(this.leftIcon=="location"){
				// 	uni.navigateTo({
				// 		url:'/pages/feature/switchcity/switchcity'
				// 	})
				// }
                this.$emit('clickLeft')
            },
            /**
             * 右侧按钮点击事件
             */
            onClickRight() {
                this.$emit('clickRight')
            },
        },
		created(){
			if(this.navbarbg){
				this.bg = this.navbarbg
			}
		},
		beforeMount(){
			// #ifdef APP-PLUS
			// 获取版本号判断
			let isios = plus.os.name == "iOS"
			if(this.navbarbg){
				this.bg = this.navbarbg;
			}else{
				this.bg = "#ffffff"
			}
			if(!isios){
				let system = uni.getSystemInfoSync().system;
				let systemversion=system.substr(0,1);
				plus.navigator.setStatusBarStyle("dark");
				if(systemversion=="4"||systemversion=="5"){
					this.bg="#000"
				}
			}
			// #endif
		},
		watch:{
			navbarbg(newValue,oldValue){
				if(newValue){
					this.bg = this.navbarbg
				}
			}
		}
    }
</script>

<style lang="scss" scoped>
	$nav-height: 44px;
	.nav-bar-out{
		position: relative;
		z-index: 20!important;
	}
    .nav-bar {
        display: block;
        position: relative;
		z-index: 20;
        width: 100%;
        overflow: hidden;
    }
	.nav-bar-view{
		position: relative;
		font-size: 15px;
		height: $nav-height;
		line-height: $nav-height;
		/* #ifdef MP-WEIXIN */
		line-height: 42px;
		/* #endif */
	}
	.nav-bar-center,.nav-bar-right,.nav-bar-left{display: flex;height: 100%;}
	.nav-bar-left{padding-left: 30rpx;}
	.nav-bar-right{padding-right: 30rpx;}
	.nav-bar-left .navbar-btn-text{font-size:15px;white-space: nowrap;}
	.nav-bar-center{flex: 1;width: 100%;justify-content: center;align-items:center;}
    .navbar-fixed {
		position: fixed;
		top:0;
		left: 0;
		font-size: 16px;
		z-index: 20;
    }
	/* 原生状态栏高度 */
	.status-bar{
		height:var(--status-bar-height);
		background-color: #fff;
	}
	.nav-bar-height{
		height:calc(var(--status-bar-height) + #{$nav-height});
		/*  #ifdef H5  */
		height:$nav-height;
		/*  #endif  */
	}
    .navbar-btn {
        min-width: 4.125em;
        display: flex;
		flex-direction: row;
		align-items: center;
        position: absolute;
		top: 0;
    }
	.nav-bar-right{right:0;}
    .navbar-btn-icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .navbar-btn-icon-left {
		padding-right:10rpx;
		margin-left: -10rpx;
    }

    .navbar-btn-icon-right {
		padding-left:10rpx;
    }
    .nav-bar-right {
        flex-direction: row-reverse;
    }

    .navbar-container {
        position: relative;
        flex: 1;
    }

    .navbar-container-title {
        text-align: center;
        color: #111a34;
        padding: 0 0.3125em;
        overflow: hidden;
		width: 100%;
		font-size: 32rpx;
    }
	.swicthTab .nav-bar-left .navbar-btn-text{
		font-size:36rpx;
		color:#000;
		font-weight:700;
	}
</style>
